
<head>
    <title>Example: Simple Package</title>
    <meta charset="utf-8">
    <link href="../base1/cockpit.css" type="text/css" rel="stylesheet">
    <script src="../base1/cockpit.js"></script>
</head>
<body>
    <div class="pf-c-page">
        <main class="pf-c-page__main" tabindex="-1">
            <section class="pf-c-page__main-section pf-m-light">
                <h2>Example: Simple Package</h2>

                <p>This example is an installable cockpit package that runs a simple command
                    to ping a remote address.</p>

                <p>Link the package into your home directory:</p>
                <ol>
                    <li>Make sure Cockpit works on the local machine.</li>
                    <li>Link this directory into your home directory:
        <pre>$ mkdir -p ~/.local/share/cockpit
        $ ln -snf $(pwd) ~/.local/share/cockpit/playground
        $ sudo systemctl restart cockpit</pre>
        </li>
                    <li>Log into cockpit using your web browser, with the same account as the above.</li>
                    <li>Choose this item from the sidebar menu</li>
                    <li>Feel free to edit this file and refresh in the browser.</li>
                </ol>
            </section>

            <section class="pf-c-page__main-section pf-m-light">
                <table class="form-table-ct">
                    <tr>
                        <td><label class="control-label" for="address">URL</label></td>
                        <td><input class="form-control" id="address" value="8.8.8.8"></td>
                    </tr>
                    <tr>
                        <td><button class="pf-c-button pf-m-secondary pf-m-primary" id="ping">Ping</button></td>
                        <td><button class="pf-c-button pf-m-secondary pf-m-danger" disabled id="stop">Stop</button></td>
                    </tr>
                </table>
                <p>
                    <pre id="output" style="display: none;">
                    </pre>
                </p>
                <p id="failure" class="warning"></p>
            </section>
        </main>
    </div>

    <script>
        var channel = null;
        var stop = document.getElementById("stop");
        var ping = document.getElementById("ping");
        ping.onclick = function() {
            var output = document.getElementById("output");
            output.innerHTML = "";
            output.setAttribute("style", "display: block;");

            if (channel)
                channel.close("terminated");

            var failure = document.getElementById("failure");
            failure.innerHTML = "";

            var address = document.getElementById("address");
            var options = {
                "payload": "stream",
                "spawn": [ "ping", address.value ],
                "err": "out",
            };
            channel = cockpit.channel(options);
            channel.onmessage = function(ev, data) {
                console.log("message", ev, data);
                output.appendChild(document.createTextNode(data));
            };
            channel.onclose = function(ev, options) {
                console.log("close", ev, options);
                if (options.problem)
                    failure.innerHTML = options.problem;
            };
            stop.removeAttribute("disabled");
        };
        stop.onclick = function() {
            stop.setAttribute("disabled", "disabled");
            if (channel)
                channel.close("terminated");
            channel = null;
        };
    </script>
</body>
</html>

